<template>
    <div class="commodityDetails">
        <div class="content">
            <div class="commodity-photoChunk">
                <nut-swiper 
                    class="commodity-photoChunk-swiper"
                    :init-page="page" 
                    :pagination-visible="true" 
                    pagination-color="#426543" 
                    auto-play="3000">
                    <nut-swiper-item  v-for="(item, idx) in bannerList" :key="idx" @click="PreviewImg(item, 1)">
                      <Image :src="item.url"></Image>
                    </nut-swiper-item>
                </nut-swiper>
            </div>
            <div class="commodity-content">
                <p class="commodity-content-name">{{ commodityName }}</p>
                <p class="commodity-content-introduction ">{{ commodityIntroduction }}</p>
                <div class="commodity-content-price">
                    <p class="content-unitPrice">
                      <span class="content-unitPrice-unit">¥</span>
                      <span class="content-unitPrice-price">{{ commodityPrice }}</span>
                    </p>
                    <!-- <p class="content-sumPeople">0人购买</p> -->
                </div>
            </div>
            <div class="commodity-details">
              <p class="commodity-details-title">商品详情</p>
              <div class="commodity-details-list">
                <p class="list-introduce">{{ commodityDetailsIntroduce }}</p>
                <div class="list-chunk" v-for="(item, idx) in detailsList" :key="idx" @click="PreviewImg(item, 2)">
                  <Image :src="item.url" mode="widthFix" ></Image>
                </div>
              </div>
            </div>
        </div>
        <div class="commodity-buy">
            <div class="commodity-buy-content">
              <div className="iconfont icon-gouwuche"  @click="GoShoppingCart()" :style="{
                marginLeft: `20px`,
              }">
                <!-- <div className="icon-gouwuche-circle">{{ cartAmount }}</div> -->
              </div>
              <div>
                <nut-button type="info" class="pay-opera add-shopping-cart" @click="AddShoppingCartOpera()">加入购物车</nut-button>
                <nut-button type="info" class="pay-opera" @click="GoBuy()">立即购买</nut-button>
              </div>
            </div>
        </div>
        <nut-notify
          @closed="NotifyClosed"
          v-model:visible="notifyFlag"
          :msg="notifyMsg"
        />
    </div>
  </template>
  
  <script>
  import { onMounted, reactive, toRefs } from 'vue';
  import './index.scss';
  import { GetCommodityDetails,AddShoppingCart,GetShoppingCartList } from '../utils/api.js';
  import Taro from '@tarojs/taro'
  import currency from 'currency.js'
  import { Cart } from '@nutui/icons-vue-taro';
  import { Image } from '@tarojs/components';
  import { eventCenter, getCurrentInstance } from '@tarojs/taro'
  export default {
    name: 'Index',
    components: {
      Image, Cart
    },
    setup(){
      const state = reactive({
        page: 1,
        commodityId: '',
        commodityName: '',
        commodityIntroduction: '',
        commodityPrice: '',
        commodityDetailsIntroduce: '',
        bannerImgsList: [],
        bannerList: [],
        detailsImgsList: [],
        detailsList: [], 
        notifyFlag: false,
        notifyMsg: '',
        cartAmount: 0, // 购物车内商品总数量
      });
      const GetConfig = async () => {
        const detailsRes = await GetCommodityDetails({
          id: Taro.getCurrentInstance().router?.params.commodityId
        });
        if(detailsRes.code == 200) {
          let { name,header,price,details, bannerImgs,detailsImgs,id } = detailsRes.data;
          state.commodityId = id;
          state.commodityName = name;
          state.commodityIntroduction = header;
          state.commodityPrice = price;
          state.commodityDetailsIntroduce = details;
          state.bannerImgsList = bannerImgs;
          state.detailsImgsList = detailsImgs;
          state.bannerList = bannerImgs.map((item) => {
            return {
              url: item
            }
          });
          state.detailsList = detailsImgs.map((item) => {
            return {
              url: item
            }
          });
        }
        // const cartRes = await GetShoppingCartList({});
        // if(cartRes.code == 200) {
        //     state.commodityList = res.data.list.map((res) => {
        //       return Object.assign({
        //         checkFlag:false,
        //         num: 1
        //       },res)
        //     })
        //   }
      }
      onMounted(() => {
        GetConfig();
      })
      // 预览图片
      const PreviewImg = (tarPreviewImg, type) => {
        console.log(type);
        // type 预览类型 1.banner 2.detail
        Taro.previewImage({
          current: tarPreviewImg.url,
          urls: type == 1 ? state.bannerImgsList : state.detailsImgsList
        })
      }
      // 前往购物车
      const GoShoppingCart = () => {
        Taro.navigateTo({
          url: `/pages/shoppingCart/index`
        })
      }
      // 添加购物车
      const AddShoppingCartOpera = async () => {
        if(Taro.getStorageSync('openId') == '') {
          state.notifyFlag = true;
          state.notifyMsg = '未登录,请前往登录！';
          return;
        }
        const res = await AddShoppingCart({
          openid: Taro.getStorageSync('openId'),
          produce_id: state.commodityId
        });
        if(res.code == 200) {
          Taro.showToast({
              title: '加入成功',
              icon: 'success',
              duration: 1500
          })
        }
      }
      const NotifyClosed = () => {
        Taro.reLaunch({
          url: `/pages/user/index?activeIndex=${2}`
        })
      };
      // 购买
      const GoBuy = () => {
        if(Taro.getStorageSync('openId') == '') {
          state.notifyFlag = true;
          state.notifyMsg = '未登录,请前往登录！';
          return;
        }
        Taro.navigateTo({
          url: `/pages/commodity-closeAnAccount/index?entryType=1&commodityId=${state.commodityId}`
        })
      }
      return {
  
        PreviewImg,
        GoShoppingCart,
        AddShoppingCartOpera,
        NotifyClosed,
        GoBuy,
        ...toRefs(state),
      }
    }
  }
  </script>
  
  